<template lang="">
  <div>
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="page" :style="{height:height+'px'}">
      <div style="background-color: white; margin-top: 10px;">
        <input type="text" class="cityAddr" placeholder="输入学校、商务楼、地址">
        <van-button type="primary" size="large" class="btn" @click="clickAction">提交</van-button>
      </div>
      <div class="his" v-if="localInfo">
        <p>搜索历史</p>
        <div v-show="ifShow">
          <LocalCityL :Info="localInfo"></LocalCityL>
          <div class="bottom" @click="clearAction">清空所有</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import LocalCityL from "@/components/LocalCityL.vue";
  import Nav from "@/components/Nav.vue";
  export default {
    name: "NearlyShops",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title_name: '',
        right_name: '切换',
        ifShow: true,
        height: this.$height + 48,
        localInfo: JSON.parse(localStorage.getItem("arr")),
      }
    },
    components: {
      LocalCityL, Nav
    },
    computed: {

    },
    created() {
      let id = this.$router.history.current.params.id
      this.axios.get('https://elm.cangdu.org/v1/cities/' + id).then(((res) => {
        console.log(res.data)
        localStorage.setItem('latitude', res.data.latitude)
        localStorage.setItem('longitude', res.data.longitude)
        this.title_name = res.data.name;
      })).catch((err) => {
        console.log(err)
      })
    },
    methods: {
      clickAction() {
        let content = document.querySelector("input").value;
        let id = this.$router.history.current.params.id;
        this.axios.get("https://elm.cangdu.org/v1/pois?city_id=" + id + "&keyword=" + content + "type=search").then(((res) => {
          this.localInfo = res.data;
        })).catch((err) => {
          console.log(err)
        })
      },
      clearAction() {
        localStorage.removeItem("arr");
        this.ifShow = false;
      }
    },
  }
</script>

<style lang="less" scoped>
  .page {
    background-color: whitesmoke;
    margin-top: 44px;
  }

  .cityAddr {
    width: 90%;
    margin-top: 20px;
    margin-left: 5%;
    box-sizing: border-box;
    border: 1px solid gainsboro;
    font-size: 16px;
    line-height: 35px;
    padding: 0 10px;
  }

  .btn {
    width: 90%;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 5%;
    font-size: 16px;
    line-height: 32px;
    height: 32px;
    background-color: rgb(49, 144, 232);
  }

  p {
    margin-left: 10px;
    font-size: 12px;
    padding: 2px;
  }

  .his {
    width: 100%;
    border: 1px solid gainsboro;
  }

  .bottom {
    text-align: center;
    line-height: 50px;
    color: rgb(109, 108, 108);
    background-color: #fff;
    border-top: 1px solid gainsboro;
  }
</style>